<template>
  <el-input
    v-model="input"
    :type="itemConfig.type || 'text'"
    :placeholder="itemConfig.placeholder"
    :disabled="itemConfig.disabled"
    :show-password="itemConfig.type === 'password'"
    @input="handleUpdate"
    @change="handleUpdate"
  />
</template>

<script lang="ts" setup>
  import { PropType, toRefs, ref, watch } from 'vue';
  import { excempleInput } from '../dataExcemple';
  import { InputItem } from '../common-form-type';
  const props = defineProps({
    itemConfig: {
      type: Object as PropType<InputItem>,
      default: (): InputItem => excempleInput,
    },
    itemValue: {
      type: [Number, String, Boolean],
      default: '',
    },
  });

  const { itemConfig, itemValue } = toRefs(props);

  const input = ref(itemValue.value);

  watch(itemValue, (v) => {
    input.value = v;
  });

  const emit = defineEmits({
    update: null,
  });

  const handleUpdate = () => {
    emit('update', { val: input.value, prop: itemConfig.value.prop });
  };
</script>
